<template>
  <div>
    <common-head :title="basicInfo.name">
    </common-head>
    <div class="detail-container">
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in pics" :key="item.id">
          <img :src="item.pic" alt="图片丢失了">
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图 -->
      <!-- 商品信息模块 -->
      <div class="item-info">
        <div class="price">
          <span class="minPrice">￥{{basicInfo.minPrice}}</span>
          <span class="state">{{basicInfo.recommendStatusStr}}</span>
        </div>
        <div class="item-title">
          <span class="item-name">{{basicInfo.name}}</span>
          <div v-if="isFavor">
            <van-icon name="like" size="22" @click="addFavor(basicInfo.id,basicInfo.type)"/>
          </div>
          <div v-else>
            <van-icon name="like-o" size="22" @click="addFavor(basicInfo.id,basicInfo.type)" />
          </div>
        </div>
        <div class="item-desc f14">
          {{basicInfo.characteristic}}
        </div>
        <div class="item-tips f14">
          【温馨提示】本产品货源紧张，站内搜索相关产品或咨询医生了解更多!
        </div>
      </div>
      <!-- 商品信息模块 -->
      <!-- 商家保证 -->
      <ul class="guarantee f14">
        <li><van-icon name="passed" color="#1989fa"/>正品保证</li>
        <li><van-icon name="passed" color="#1989fa"/>满58包邮</li>
        <li><van-icon name="passed" color="#1989fa"/>隐私配送</li>
        <li><van-icon name="passed" color="#1989fa"/>退换无忧</li>
        <li @click="showToast"><van-icon name="ellipsis" color="#000000" size="22"/></li>
      </ul>
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
      >
        <ul class="guarantee-popup-item">
          <li class="guarantee-header">服务与承诺</li>
          <li class="guarantee-body">
            <div class="guarantee-body-title"><van-icon name="ecard-pay" size="24" color="#1989fa"/>正品保证</div>
            <div class="desc">康爱多是全国首批获国家食药监局批准的合法网上药店，专供正规厂家优质药品！</div>
          </li>
          <li class="guarantee-body">
            <div class="guarantee-body-title"><van-icon name="ecard-pay" size="24" color="#1989fa"/>满58元包邮</div>
            <div class="desc">买满包邮，优惠多多。全场订单金额满58元即享受免邮费优惠！</div>
          </li>
          <li class="guarantee-body">
            <div class="guarantee-body-title"><van-icon name="ecard-pay" size="24" color="#1989fa"/>隐私配送</div>
            <div class="desc">购物无忧，隐私配送。您在康爱多购买时产生的所有个人信息将被保密，快递包装上也不会出现您的购物内容。</div>
          </li>
          <li class="guarantee-body">
            <div class="guarantee-body-title"><van-icon name="ecard-pay" size="24" color="#1989fa"/>退换无忧</div>
            <div class="desc">购买退换无忧服务，可享受一定金额的退换货运费补贴和药品近效期内免费置换（具体以下单显示为准）。</div>
          </li>
        </ul>
      </van-popup>
      <!-- 商家保证 -->
      <!-- 商品详情 -->
      <div v-html="content" class="content"></div>
      <!-- 商品详情 -->
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart"/>
      <van-goods-action-button color="#05a5f9" type="warning" text="加入购物车" @click="skuAction(0)"/>
      <van-goods-action-button color="#ff423f" type="danger" text="立即购买" @click="skuAction(1)"/>
    </van-goods-action>
    <!-- 商品导航 -->
    <!-- 购买弹窗 -->
    <van-popup v-model="skuShow" closeable round position="bottom" :style="{ height: '30%' }">
      <van-card
        :num="basicInfo.number"
        :price="basicInfo.minPrice"
        :title="basicInfo.name"
        :thumb="basicInfo.pic"
      >
        <template #footer>
          <van-stepper v-model="basicInfo.number" theme="round" size="22" />
        </template>
      </van-card>
      <van-button @click="confirmAction(basicInfo.id)" size="large" round type="danger"
      >确定</van-button
      >
    </van-popup>
    <!-- 购买弹窗 -->
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead.vue'
import { fetchItemDetail, addItemCart, addItemFavor, checkItemFavor } from '_api'
import { getToken } from '_utils/index.js'
export default {
  name: 'Detail',
  data () {
    return {
      basicInfo: {}, // 商品详情的基本信息
      content: '', // 商品的详情描述
      pics: {}, // 商品的轮播图片
      show: false, // 弹出框状态
      skuShow: false, // 点击购买时弹窗
      action: 0, // 0表示加入购物车，1表示立即购买
      isFavor: false // 是否收藏了
    }
  },
  created () {
    this.fetchItemDetails()
    this.checkItemFavors()
  },
  methods: {
    // 点击弹出商品购买弹窗
    skuAction (n) {
      this.skuShow = true
      this.action = n
    },
    // 点击弹出框的确认按钮执行的动作
    confirmAction (id) {
      // 加入购物车
      if (this.action === 0) {
        addItemCart({
          goodsId: id,
          number: 1,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.$toast.success({
              message: '加入购物车成功',
              duration: 1000,
              onClose: () => {
                this.skuShow = false
              }
            })
            // 提交mutation
            this.$store.commit('cart/change_cart_num', {
              itmes: res.data.data.items,
              number: res.data.data.number
            })
          }
        })
      } else {
        // 购买
        this.$toast.success({
          message: '购买成功',
          duration: 1500,
          onClose: () => {
            this.skuShow = false
          }
        })
      }
    },
    // 显示商家参保信息
    showToast () {
      this.show = true
    },
    // 请求商品详情
    fetchItemDetails () {
      fetchItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 0) {
          // 弹出商品详情需要商品数量
          this.basicInfo = { ...res.data.data.basicInfo, number: 1 }
          this.category = res.data.data.category
          // 对返回的富文本字符串的图片进行处理
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.pics = res.data.data.pics
        }
      })
    },
    // 点击加入收藏
    addFavor (id, type) {
      // 先判断当前商品是否收藏
      /* 这里的代码可以简化，但是我暂时不会 */
      checkItemFavor({
        goodsId: id,
        type,
        token: getToken()
      }).then(res => {
        // -1表示未收藏，0表示已收藏
        if (res.data.code === -1) {
          addItemFavor({
            goodsId: id,
            type,
            token: getToken()
          }).then(res => {
            // 收藏图标的改变
            this.isFavor = true
            if (res.data.code === 0) {
              this.$toast.success({
                message: '收藏成功',
                duration: 1000
              })
            }
          })
        } else if (res.data.code === 0) {
          this.$toast.fail({
            message: '已收藏，请勿重复收藏',
            duration: 1000
          })
        }
      })
    },
    // 判断商品是否收藏
    checkItemFavors () {
      checkItemFavor({
        goodsId: this.$route.query.id,
        type: 0,
        token: getToken()
      }).then(res => {
        // -1表示未收藏，0表示已收藏
        if (res.data.code === -1) {
          this.isFavor = false
        }
        if (res.data.code === 0) {
          this.isFavor = true
        }
      })
    },
    // 进入购物车
    toCart () {
      this.$router.push('/cart')
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.f14 {
  font-size: 14px;
}
.detail-container {
  padding: 0 0 0.5333rem 0;
  .my-swipe .van-swipe-item img{
    width: 10rem;
  }
  .item-info {
    padding: 0 18px;
    line-height: 40px;
    .price{
      color: red;
      display: flex;
      justify-content: space-between;
      margin
      .minPrice{
        font-size: 24px;
      }
      .state {
        font-size: 14px;
      }
    }
    .item-title{
      display: flex;
      justify-content: space-between;
      .item-name{
        font-size: 22px;
      }
      .van-icon{
        color: red;
      }
    }
    .item-desc{
      color: #333333;
    }
    .item-tips{
      color: #999999;
      line-height: 20px;
    }
  }
  .guarantee{
    padding-top: 20px;
    display: flex;
    color: #333333;
    justify-content: space-evenly;
  }
  .guarantee-popup-item{
    padding: 0 18px;
    .guarantee-header{
      text-align: center;
      font-size: 22px;
      font-weight: 900;
    }
    .guarantee-body{
      padding: 10px 0;
      .guarantee-body-title{
        font-size: 16px;
        color: #0f0f0f;
        line-height: 40px;
        text-align: left;
      }
      .desc{
        color: #999;
        font-size: 12px;
        line-height: 0.34rem;
        text-align: left;
        padding-left: 22px;
      }
    }
  }
}

</style>
